<template>
  <div class="shop-settings">
    <div class="page-header">
      <h2>店铺设置</h2>
    </div>

    <a-tabs v-model:activeKey="activeTab">
      <!-- 基本信息 -->
      <a-tab-pane key="basic" tab="基本信息">
        <a-card>
          <a-form
            :model="basicForm"
            :rules="basicRules"
            @finish="handleBasicSubmit"
            layout="vertical"
          >
            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="店铺名称" name="shopName">
                  <a-input
                    v-model:value="basicForm.shopName"
                    placeholder="请输入店铺名称"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="店铺Logo" name="logo">
                  <a-upload
                    v-model:file-list="logoFileList"
                    list-type="picture-card"
                    :show-upload-list="false"
                    :before-upload="beforeLogoUpload"
                    @change="handleLogoChange"
                  >
                    <div v-if="logoUrl">
                      <img :src="logoUrl" alt="logo" style="width: 100%" />
                    </div>
                    <div v-else>
                      <PlusOutlined />
                      <div style="margin-top: 8px">上传Logo</div>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-col>
            </a-row>

            <a-form-item label="店铺简介" name="description">
              <a-textarea
                v-model:value="basicForm.description"
                placeholder="请输入店铺简介"
                :rows="4"
              />
            </a-form-item>

            <a-row :gutter="24">
              <a-col :span="12">
                <a-form-item label="联系电话" name="phone">
                  <a-input
                    v-model:value="basicForm.phone"
                    placeholder="请输入联系电话"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="联系邮箱" name="email">
                  <a-input
                    v-model:value="basicForm.email"
                    placeholder="请输入联系邮箱"
                  />
                </a-form-item>
              </a-col>
            </a-row>

            <a-form-item label="店铺地址" name="address">
              <a-textarea
                v-model:value="basicForm.address"
                placeholder="请输入店铺地址"
                :rows="2"
              />
            </a-form-item>

            <a-form-item>
              <a-button type="primary" html-type="submit" :loading="basicLoading">
                保存基本信息
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-tab-pane>

      <!-- 支付设置 -->
      <a-tab-pane key="payment" tab="支付设置">
        <a-card>
          <a-form
            :model="paymentForm"
            :rules="paymentRules"
            @finish="handlePaymentSubmit"
            layout="vertical"
          >
            <a-form-item label="支付宝账号" name="alipayAccount">
              <a-input
                v-model:value="paymentForm.alipayAccount"
                placeholder="请输入支付宝账号"
              />
            </a-form-item>

            <a-form-item label="微信支付商户号" name="wechatMerchantId">
              <a-input
                v-model:value="paymentForm.wechatMerchantId"
                placeholder="请输入微信支付商户号"
              />
            </a-form-item>

            <a-form-item label="银行账户" name="bankAccount">
              <a-input
                v-model:value="paymentForm.bankAccount"
                placeholder="请输入银行账户"
              />
            </a-form-item>

            <a-form-item label="开户行" name="bankName">
              <a-input
                v-model:value="paymentForm.bankName"
                placeholder="请输入开户行"
              />
            </a-form-item>

            <a-form-item>
              <a-button type="primary" html-type="submit" :loading="paymentLoading">
                保存支付设置
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-tab-pane>

      <!-- 通知设置 -->
      <a-tab-pane key="notification" tab="通知设置">
        <a-card>
          <a-form
            :model="notificationForm"
            @finish="handleNotificationSubmit"
            layout="vertical"
          >
            <a-form-item label="订单通知">
              <a-checkbox-group v-model:value="notificationForm.orderNotifications">
                <a-checkbox value="new_order">新订单通知</a-checkbox>
                <a-checkbox value="payment_success">支付成功通知</a-checkbox>
                <a-checkbox value="refund_request">退款申请通知</a-checkbox>
              </a-checkbox-group>
            </a-form-item>

            <a-form-item label="学员通知">
              <a-checkbox-group v-model:value="notificationForm.studentNotifications">
                <a-checkbox value="course_update">课程更新通知</a-checkbox>
                <a-checkbox value="assignment_submit">作业提交通知</a-checkbox>
                <a-checkbox value="exam_result">考试成绩通知</a-checkbox>
              </a-checkbox-group>
            </a-form-item>

            <a-form-item label="系统通知">
              <a-checkbox-group v-model:value="notificationForm.systemNotifications">
                <a-checkbox value="maintenance">系统维护通知</a-checkbox>
                <a-checkbox value="update">系统更新通知</a-checkbox>
                <a-checkbox value="security">安全提醒通知</a-checkbox>
              </a-checkbox-group>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" html-type="submit" :loading="notificationLoading">
                保存通知设置
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-tab-pane>

      <!-- 安全设置 -->
      <a-tab-pane key="security" tab="安全设置">
        <a-card>
          <a-form layout="vertical">
            <a-form-item label="修改密码">
              <a-button @click="showChangePassword">修改登录密码</a-button>
            </a-form-item>

            <a-form-item label="两步验证">
              <a-switch
                v-model:checked="securityForm.twoFactorAuth"
                @change="handleTwoFactorChange"
              />
              <span style="margin-left: 8px">
                {{ securityForm.twoFactorAuth ? '已开启' : '已关闭' }}
              </span>
            </a-form-item>

            <a-form-item label="登录日志">
              <a-button @click="viewLoginLogs">查看登录日志</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-tab-pane>
    </a-tabs>

    <!-- 修改密码弹窗 -->
    <a-modal
      v-model:open="passwordModalVisible"
      title="修改密码"
      @ok="handlePasswordChange"
      @cancel="passwordModalVisible = false"
    >
      <a-form :model="passwordForm" layout="vertical">
        <a-form-item label="当前密码" name="currentPassword">
          <a-input-password
            v-model:value="passwordForm.currentPassword"
            placeholder="请输入当前密码"
          />
        </a-form-item>
        <a-form-item label="新密码" name="newPassword">
          <a-input-password
            v-model:value="passwordForm.newPassword"
            placeholder="请输入新密码"
          />
        </a-form-item>
        <a-form-item label="确认新密码" name="confirmPassword">
          <a-input-password
            v-model:value="passwordForm.confirmPassword"
            placeholder="请再次输入新密码"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'

const activeTab = ref('basic')

// 基本信息表单
const basicForm = reactive({
  shopName: '蜗牛AI学院',
  description: '专注于AI教育的领先机构，提供高质量的在线课程',
  phone: '400-123-4567',
  email: 'contact@woniuai.com',
  address: '北京市朝阳区科技园区创新大厦A座1001室'
})

const basicRules = {
  shopName: [
    { required: true, message: '请输入店铺名称', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入联系邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ]
}

const basicLoading = ref(false)
const logoFileList = ref<any[]>([])
const logoUrl = ref('https://via.placeholder.com/100x100')

// 支付设置表单
const paymentForm = reactive({
  alipayAccount: 'merchant@woniuai.com',
  wechatMerchantId: '1234567890',
  bankAccount: '6222021234567890123',
  bankName: '中国工商银行北京分行'
})

const paymentRules = {
  alipayAccount: [
    { required: true, message: '请输入支付宝账号', trigger: 'blur' }
  ]
}

const paymentLoading = ref(false)

// 通知设置表单
const notificationForm = reactive({
  orderNotifications: ['new_order', 'payment_success'],
  studentNotifications: ['course_update', 'assignment_submit'],
  systemNotifications: ['maintenance', 'update']
})

const notificationLoading = ref(false)

// 安全设置表单
const securityForm = reactive({
  twoFactorAuth: false
})

// 修改密码相关
const passwordModalVisible = ref(false)
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// Logo上传前检查
const beforeLogoUpload = (file: File) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJpgOrPng) {
    message.error('只能上传 JPG/PNG 格式的图片!')
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error('图片大小不能超过 2MB!')
  }
  return isJpgOrPng && isLt2M
}

// 处理Logo上传变化
const handleLogoChange = (info: any) => {
  if (info.file.status === 'done') {
    logoUrl.value = URL.createObjectURL(info.file.originFileObj)
    message.success('Logo上传成功')
  }
}

// 提交基本信息
const handleBasicSubmit = async (values: any) => {
  basicLoading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    message.success('基本信息保存成功')
  } catch (error) {
    message.error('保存失败，请重试')
  } finally {
    basicLoading.value = false
  }
}

// 提交支付设置
const handlePaymentSubmit = async (values: any) => {
  paymentLoading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    message.success('支付设置保存成功')
  } catch (error) {
    message.error('保存失败，请重试')
  } finally {
    paymentLoading.value = false
  }
}

// 提交通知设置
const handleNotificationSubmit = async (values: any) => {
  notificationLoading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    message.success('通知设置保存成功')
  } catch (error) {
    message.error('保存失败，请重试')
  } finally {
    notificationLoading.value = false
  }
}

// 显示修改密码弹窗
const showChangePassword = () => {
  passwordModalVisible.value = true
}

// 处理密码修改
const handlePasswordChange = async () => {
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    message.error('两次输入的密码不一致')
    return
  }
  
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    message.success('密码修改成功')
    passwordModalVisible.value = false
    // 清空表单
    Object.assign(passwordForm, {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
  } catch (error) {
    message.error('密码修改失败，请重试')
  }
}

// 处理两步验证开关
const handleTwoFactorChange = (checked: boolean) => {
  if (checked) {
    message.success('两步验证已开启')
  } else {
    message.success('两步验证已关闭')
  }
}

// 查看登录日志
const viewLoginLogs = () => {
  message.info('查看登录日志功能开发中...')
}
</script>

<style scoped>
.shop-settings {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0;
  color: #333;
}

:deep(.ant-upload-select-picture-card) {
  width: 100px;
  height: 100px;
}

:deep(.ant-tabs-content-holder) {
  padding-top: 16px;
}
</style>
